import {
  Form,
  Input,
  Button,
  Modal,
  Select, Row, Col, Upload, Icon,
} from 'antd';


import React from 'react';
import { connect } from 'dva';

// const R = require('ramda');
const FormItem = Form.Item;

const sendOrder = Form.create()(
  class CreateForm extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleConfirm = (props: any) => {
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { sm: { span: 6 } }, wrapperCol: { sm: { span: 14 } } };

      const footer = [];
      footer.push(
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );


      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)}>
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="派单"
          // @ts-ignore
          visible={this.state.open}
          width={800}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form>
            <div>
              <Col md={24} sm={24} style={{ paddingBottom: 10 }}>
                <span style={{ fontWeight: 'bold', fontSize: 17, marginBlock: '500px' }}>
                  <Icon type="tag" theme="twoTone" />分配供应商
                </span>
              </Col>
                  <Row>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="海运供应商" hasFeedback>
                        {getFieldDecorator('shippingSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="拖车供应商" hasFeedback>
                        {getFieldDecorator('trailerSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="报关供应商" hasFeedback>
                        {getFieldDecorator('declareSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="空运供应商" hasFeedback>
                        {getFieldDecorator('airSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="快递供应商" hasFeedback>
                        {getFieldDecorator('expressSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="保险供应商" hasFeedback>
                        {getFieldDecorator('insuranceSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="商检供应商" hasFeedback>
                        {getFieldDecorator('inspectionSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="产地证供应商" hasFeedback>
                        {getFieldDecorator('coSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="仓内装供应商" hasFeedback>
                        {getFieldDecorator('storageSupplierId', {
                          rules: [{
                            required: true, message: '请选择供应商代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="航空公司" hasFeedback>
                        {getFieldDecorator('aviationId', {
                          rules: [{
                            required: true, message: '请选择航空公司代码',
                          }],
                          initialValue: '',
                        })(
                          <Select >
                            <Select.Option value="3">乐达</Select.Option>
                          </Select>,
                        )}
                      </FormItem>
                    </Col>
                  </Row>

              <Col md={24} sm={24} style={{ paddingBottom: 10 }}>
                <span style={{ fontWeight: 'bold', fontSize: 17, marginBlock: '500px' }}>
                  <Icon type="tag" theme="twoTone" />订舱
                </span>
              </Col>
              <Row>
                <Col span={12} style={{ marginBottom: 10, marginLeft: 100 }}>
                  <a href="#" style={{ fontSize: '14px' }}>导出订舱单</a>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem {...formItemLayout} label="SO号" hasFeedback>
                    {getFieldDecorator('soNo', {
                      rules: [{
                        required: false, message: '请输入SO号',
                      }],
                      initialValue: '',
                    })(
                      <Input maxLength={50}/>,
                    )}
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>上传SO</span>} hasFeedback>
                    <Upload.Dragger>
                      <p className="ant-upload-drag-icon">
                        <Icon type="inbox"/>
                      </p>
                      <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                    </Upload.Dragger>
                  </FormItem>
                </Col>
              </Row>
            </div>

            <Col md={24} sm={24} style={{ paddingBottom: 10 }}>
                <span style={{ fontWeight: 'bold', fontSize: 17, marginBlock: '500px' }}>
                  <Icon type="tag" theme="twoTone" />分配跟单员
                </span>
            </Col>
            <FormItem {...formItemLayout} label="跟单员" hasFeedback>
              {getFieldDecorator('loadingPort', {
                rules: [{
                  required: true, message: '请选择跟单员',
                }],
                initialValue: '',
              })(
                <Select >
                  <Select.Option value={0}>吴文博</Select.Option>
                  <Select.Option value={1}>思洁</Select.Option>
                  <Select.Option value={2}>一鸣</Select.Option>
                </Select>,
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="备注" hasFeedback>
              {getFieldDecorator('confirmLoginPwd', {
                initialValue: '',
              })(
                <Input.TextArea maxLength={1000} autosize={{ minRows: 3, maxRows: 9 }} />,
              )}
            </FormItem>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(sendOrder);
